<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let str1="字符串";
        let str2='字符串';
        let str3=`字符串`;
        console.log(typeof str1);
        console.log(typeof str2);
        console.log(typeof str3);
        var num=10;
        let str4= "<li>"+num+"</li>"+
                  "<li>"+num+"</li>"+
                  "<li>"+num+"</li>"+
                  "<li>"+num+"</li>"+
                  "<li>"+num+"</li>";
        console.log(str4);


        // 模板字符串，允许字符解构换行定义，并且保留编码格式
        let str5=`
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        `;
        console.log(str5);

        //模板字符串中可以通过语法直接在模板中调用变量，${变量名|函数|简单表达式等}
        // 模板字符串中的${}相当于解析语法转换到js中
        var arrs=["小波波","小薇薇","小杰杰","小金金","小猪猪"];

        let str6=`
            <li>${arrs[0]}</li>
            <li>${arrs[1]}</li>
            <li>${arrs[2]}</li>
            <li>${arrs[3]}</li>
            <li>${arrs[4]}</li>
        `;
        console.log(str6);
        function getNum(){
            // 如果函数没有返回值，模板字符串调用该函数并返回undefined并拼接
            // 如果函数有返回值，模板字符串调用该函数的返回并拼接
            return "奥利给";
        }
        let str7=`
            <li>${arrs[0]}</li>
            <li>${arrs[1]}</li>
            <li>${arrs[2]}</li>
            <li>${arrs[3]}</li>
            <li>${arrs[4]}</li>
            <li>${Math.PI}</li>
            <li>${Math.abs(-100)}</li>
            <li>${getNum()}</li>
            <li>${100>1000}</li>
            <li>${1==1?"真":"假"}</li>
        `;
        console.log(str7);
    </script>
</head>
<body>
    
</body>
</html>